<template>
	<view class="page">
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(i,k) in 4" :key="k">
				<view class="swiper-item">
					<image class="img" src="../../static/images/circle.png" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		
		<view class="info">
			<view class="name">
				华为NOVA7
			</view>
			<view class="price">
				￥88845.00
			</view>
			<view class="text-gray subinfo">
				<view>运费:0.00</view>
				<view>库存:3215件</view>
			</view>
			<view class="text-gray subinfo">
				<view>规格:</view>
			</view>
		</view>
		
		<view class="detail">
			<image src="http://yanxuan.nosdn.127.net/8209e53826c7484b1602ceb5ef237a30.jpg" mode="aspectFill"></image>
			<image src="http://yanxuan.nosdn.127.net/8209e53826c7484b1602ceb5ef237a30.jpg" mode="aspectFill"></image>
			<image src="http://yanxuan.nosdn.127.net/8209e53826c7484b1602ceb5ef237a30.jpg" mode="aspectFill"></image>
		</view>
		
		<view class="footer">
			<view class="left" @click="toCart">
				加入购物车
			</view>
			<view class="right" @click="buyNow">
				立即购买
			</view>
		</view>
		
		<uni-popup ref="popup" type="bottom">
			<view class="specs">
				<view class="top">
					<image class="img" src="../../static/images/circle.png" mode="aspectFill"></image>
					<view class="info">
						<view class="price">￥8825.00</view>
						<view class="number">数量：1个</view>
						<view class="spec">规格：黑色</view>
					</view>
				</view>
				<view class="form">
					<view>规格</view>
					<view class="taglist">
						<view class='cu-tag'>默认</view>
						<view class='cu-tag'>默认</view>
						<view class='cu-tag'>默认</view>
					</view>
					<view class="number">
						<view>购买数量</view>
						<uni-number-box @change=""></uni-number-box>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			toCart() {
				if (this.mask) {
					
				} else {
					this.$refs.popup.open()
				}
			},
			buyNow() {
				if (this.mask) {
					
				} else {
					this.$refs.popup.open()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "/colorui/main.css";
	
	.page {
		background-color: #fff;
		padding-bottom: 100rpx;
	}
	.swiper {
		height: 600rpx;
		.img {
			width: 100%;
			height: 600rpx;
		}
	}
	.info {
		padding: 20rpx 40rpx;
		.name {
			margin: 20rpx 0;
		}
		.price {
			color: red;
			margin: 20rpx 0;
		}
		.subinfo {
			font-size: 26rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
		}
	}
	.detail {
		image {
			width: 100%;
		}
	}
	.footer {
		height: 100rpx;
		display: flex;
		font-size: 30rpx;
		letter-spacing: 4rpx;
		color: #fff;
		position: fixed;
		z-index: 300;
		bottom: 0;
		width: 100%;
		.left {
			flex: 1;
			background-color: #404457;
			display: flex;
			height: 100%;
			justify-content: center;
			align-items: center;
		}
		.right {
			flex: 1;
			background-color: #00D388;
			display: flex;
			height: 100%;
			justify-content: center;
			align-items: center;
		}
	}

	.specs {
		padding-bottom: 100rpx;
		height: 60vh;
		background-color: #fff;
		.top {
			padding: 0 40rpx;
			position: relative;
			font-size: 26rpx;
			display: flex;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #DFDFDF;
			.img {
				width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;
				background: #fff;
				box-shadow: 1px 1px 5px #E6E5E5, -1px -1px 5px #E6E5E5;
				margin-top: -20rpx;
			}
			.info {
				padding: 0 30rpx;
				display: flex;
				flex-flow: column;
				justify-content: space-around;
			}
			.price {
				margin: 10rpx -6rpx;
				font-size: 30rpx;
			}
		}
		
		.form {
			padding: 30rpx;
			font-size: 30rpx;
			font-weight: 600;
			.taglist {
				padding: 30rpx 0;
				.cu-tag {
					margin-right: 20rpx;
				}
			}
			.number {
				margin: 30rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
		
	}
</style>
